import Phaser from 'phaser'

export default class extends Phaser.State {
  preload(game) {
    game.stage.backgroundColor = '#a8d4bf'
    game.load.image('logo', '/assets/images/logo.png')
    game.load.spritesheet('sheetImg', '/assets/learn/s37x45.png', 37, 45, 18)
    game.load.atlasXML(
      'xmlImg',
      '/assets/learn/xml.png',
      '/assets/learn/data.xml',
    )

    game.load.atlas(
      'jsonImg',
      '/assets/learn/json.png',
      '/assets/learn/data.json',
    )

    game.load.audio('audio', '/assets/learn/cedAudio.mp3')
    game.load.bitmapFont(
      'bitmapFont',
      '/assets/learn/cedFont.png',
      '/assets/learn/cedFont.xml',
    )

    game.load.onFileStart.add((progress, key, url) => {
      console.log(
        `ce--onFileStart, progress: ${progress}, key: ${key}, url: ${url}`,
      )
    })

    game.load.onFileComplete.add((progress, key, success, totalLoad, total) => {
      console.log(
        `ce--onFileComplete, progress: ${progress}, key: ${key}, success: ${success}, totalLoad: ${totalLoad}, total: ${total}`,
      )
    })

    game.load.onLoadStart.add(() => {
      console.log('ce--onLoadStart')
    })

    game.load.onBeforeLoadComplete.add(() => {
      console.log('ce--onBeforeLoadComplete')
    })

    game.load.onLoadComplete.add(() => {
      console.log('ce--onLoadComplete')
    })
  }

  create(game) {
    const text = game.add.text(game.world.centerX, 25, 'Hello World', {
      fill: '#fff',
    })
    text.anchor.set(0.5)

    const logo = game.add.image(game.world.centerX, game.world.centerY, 'logo')
    logo.anchor.set(0.5)

    const sheetImg = game.add.image(0, 30, 'sheetImg', 10)
    game.add.image(40, 30, 'xmlImg')
    const jsonImg = game.add.image(80, 30, 'jsonImg', 11)

    game.add.bitmapText(0, 0, 'bitmapFont', 'Hello world')
  }
}
